<template>
<uni-shadow-root class="partials-processInstanceItem-index"><view class="process_item">
  <view class="process_title">
    <view class="process_title_left">
      <image class="order_icon" src="https://image1.sansancloud.com/xianhua/2019_12/17/14/53/24_262.jpg?x-oss-process=style/preview_120"></image>
      <text class="order_no">{{processItem.belongOrderNo}}</text>
    </view>
    <view class="process_title_right">
      <text class="process_type" :style="'color:'+(setting.platformSetting.defaultColor)">[流程]</text>
      <text class="process_name">{{processItem.belongProcessName}}</text>
    </view>
  </view>
  <view class="process_description">
    <view class="user_group">
      <view class="service">
        <text class="service_name" style="font-weight:bold;font-size:30rpx;">【云技师】</text>
        <text class="service_name" v-if="processItem.belongServantId==0">暂无</text>
        <text class="service_name" v-else>{{processItem.belongServantName}}</text>
      </view>
      <view class="concat_line"></view>
      <view class="service_point" :style="'border:2rpx solid '+(setting.platformSetting.defaultColor)">
        <text v-if="processItem.servantConfirmServantId!=0&&processItem.currentStageSequence<100">开始</text>
        <text v-if="processItem.servantConfirmServantId==0">等待</text>
        服务
        <text v-if="processItem.currentStageSequence>=9999&&processItem.servantConfirmServantId!=0">结束</text>
      </view>
      <view class="concat_line"></view>
      <view class="service" @click="check_form_detail" :data-id="processItem.customFormCommitId">
        <text class="service_name" style="font-weight:bold;font-size:30rpx;">【客户】</text>
        <text class="service_name" v-if="processItem.belongPlatformUserName">{{processItem.belongPlatformUserName}}</text>
        <text class="service_name" v-else>暂无</text>
      </view>
    </view>
    <view class="process_stage_list">
      <view class="process_stage">
        <text class="process_stage_name" :style="'color:#fff;background:'+(setting.platformSetting.defaultColor)+';border-color:'+(setting.platformSetting.defaultColor)">订单开始</text>
        <view class="process_line"></view>
      </view>
      <view v-for="(stage,index) in (processItem.process.stages)" :key="stage.index" class="process_stage">
        <text class="process_stage_name active" v-if="index+1>processItem.currentStageSequence">{{stage.name}}</text>
        <text class="process_stage_name" v-else-if="index+1==processItem.currentStageSequence" :style="'color:#fff;background:'+(setting.platformSetting.secondColor)+';border-color:'+(setting.platformSetting.secondColor)">{{stage.name}}</text>
        <text class="process_stage_name" v-else :style="'color:#fff;background:'+(setting.platformSetting.defaultColor)+';border-color:'+(setting.platformSetting.defaultColor)">{{stage.name}}</text>
        <view class="process_line" v-if="index+1!=2"></view>
      </view>
      <view class="process_stage">
        <text class="process_stage_name active" v-if="processItem.currentStageSequence<9999&&processItem.payStatus!=1">扫码支付</text>
        <text class="process_stage_name" v-else-if="processItem.currentStageSequence>=9999&&processItem.payStatus!=1" style="color:#fff;background:#ddd;border-color:#ddd">还未付款</text>
        <text class="process_stage_name" v-else :style="'color:#fff;background:'+(setting.platformSetting.defaultColor)+';border-color:'+(setting.platformSetting.defaultColor)">扫码支付</text>
        <view class="process_line"></view>
      </view>
      <view class="process_stage">
        <text class="process_stage_name" :style="'color:#fff;background:'+(setting.platformSetting.defaultColor)+';border-color:'+(setting.platformSetting.defaultColor)+';'" v-if="processItem.currentStageSequence==9999&&processItem.payStatus==1">平台回访</text>
        <text class="process_stage_name" style="color:#fff;background:red;border-color:red;" v-if="processItem.currentStageSequence==10000">异常结束</text>
        <text class="process_stage_name" style="color:#fff;background:#888;border-color:#888;" v-if="processItem.currentStageSequence==10001">订单作废</text>
        <text class="process_stage_name" style="border-color:#888;" v-if="processItem.currentStageSequence<9999&&processItem.payStatus!=1">平台回访</text>
        <text class="process_stage_name" style="border-color:#888;" v-if="processItem.currentStageSequence>=9999&&processItem.payStatus!=1">平台回访</text>
      </view>
    </view>
  </view>
  <view class="process_bottom">
    <view class="process_bottom_left">
      <view class="check_record" @click="confirmProcessOrder" :data-id="processItem.id" v-if="processItem.currentStageSequence<=0&&loginUser.platformUser.managerServantId==processItem.belongServantId&&processItem.belongServantId!=0" :style="'border:2rpx solid '+(setting.platformSetting.defaultColor)+';'">
        <text :style="'color:'+(setting.platformSetting.defaultColor)">确认接单</text>
      </view>
      <view v-for="(action,index) in (processItem.platformUserActions)" :key="action.index" class="check_record" :style="'border:2rpx solid '+(setting.platformSetting.defaultColor)+';'" v-if="processItem.platformUserActions" @click="doProcessAction" :data-formId="action.customFormId" :data-actionId="action.id" :data-processInstanceId="processItem.id">
        <text :style="'color:'+(setting.platformSetting.defaultColor)">{{action.name}}</text>
      </view>
      <view class="check_record" @click="createPaymentCode" :data-id="processItem.id" v-if="(processItem.payStatus==0||processItem.payStatus==3)&&loginUser.platformUser.managerServantId==processItem.belongServantId&&processItem.belongServantId!=0&&processItem.currentStageSequence>=9999" :style="'border:2rpx solid '+(setting.platformSetting.defaultColor)+';'">
        <text :style="'color:'+(setting.platformSetting.defaultColor)">生成支付码</text>
      </view>
      <view class="check_record" v-if="processItem.currentStageSequence>=9999" style="border:none">
        <text :style="'color:'+(setting.platformSetting.defaultColor)" v-if="processItem.payStatus==1">已付款</text>
        <text :style="'color:'+(setting.platformSetting.defaultColor)" v-if="processItem.payStatus==0">未付款</text>
        <text :style="'color:'+(setting.platformSetting.defaultColor)" v-if="processItem.payStatus==3">部分付款</text>
      </view>
    </view>
    <view class="process_bottom_right">
      <image class="process_icon" src="https://image1.sansancloud.com/xianhua/2018_11/14/19/58/37_380.jpg?x-oss-process=style/preview_120"></image>
      <text class="process_time">{{processItem.addTime}}</text>
      <image @click="check_form_detail" :data-id="processItem.customFormCommitId" class="process_dot" src="https://image1.sansancloud.com/xianhua/2018_11/14/21/7/48_739.jpg?x-oss-process=style/preview_120"></image>
    </view>
  </view>
</view>

<component-tag-nameImageLink :data="paymentCodeUrl" v-if="paymentCodeState"></component-tag-nameImageLink></uni-shadow-root>
</template>

<script>
import ComponentTagNameImageLink from '../imgPopup/imgPopup.vue'
global['__wxVueOptions'] = {components:{'component-tag-nameImageLink': ComponentTagNameImageLink}}

global['__wxRoute'] = 'partials/processInstanceItem/index'
const app = getApp();
Component({
  properties: {
    data: {
      type: JSON,
      value: 'default value',
    }
  },
  data: {
    someData: {},
    processItem:{},
    paymentCodeUrl:"",
    paymentCodeState:false
  },

  ready: function () {
    let that = this;
    console.log("====processInstanceItem====", that.data.data)
    that.setData({ processItem: that.data.data,setting: app.globalData.setting, loginUser: app.globalData.loginUser })
  },
  methods: {
    tolinkUrl: function (data) {
      let linkUrl = data.currentTarget ? data.currentTarget.dataset.link : data;
      console.log("==linkUrl===", linkUrl)
      app.globalData.linkEvent(linkUrl)
    },
    check_form_detail: function (data){
      let that=this;
      console.log("====data===", data)
      let formId = data.currentTarget.dataset.id ? data.currentTarget.dataset.id:0;
      wx.showActionSheet({
        itemList: ['查看用户提交的表单'],
        success: function (res) {
          console.log(res.tapIndex)
          if (!formId){
            wx.showModal({
              title: '提示',
              content: '主人~该流程没有内容哦!',
              success: function (res) {
                if (res.confirm) {
                  console.log('用户点击确定')
                } else if (res.cancel) {
                  console.log('用户点击取消')
                }
              }
            })
          } else {
            let url = "check_form_detail.html?custom_form_commit_id=" + formId
            that.tolinkUrl(url)
          }
        },
        fail: function (res) {
          console.log(res.errMsg)
        }
      })
    },
    createPaymentCode: function (event){
      wx.showToast({
        title: '生成中...',
        icon: 'loading',
      })
      let that = this;
      that.setData({ paymentCodeState: false })
      let processInstanceId = event.currentTarget.dataset.id || 0;
      let getParams={};
      getParams.processInstanceId = processInstanceId;
      let customIndex = app.globalData.AddClientUrl("/pay_process_instance_with_wx_qr_code.html", getParams)
      wx.request({
        url: customIndex.url,
        header: app.globalData.header,
        success: function (res) {
          wx.hideLoading();
          console.log('====createPaymentCode===', res)
          if (res.data.errcode == 0) {
            that.setData({ paymentCodeState: true, paymentCodeUrl: { imageUrl: res.data.relateObj, price: that.data.processItem.serviceAmount}})
          } else {
            wx.showToast({
              title: res.data.errMsg,
              icon: 'success',
              duration: 2000
            })
          }
        },
        complete: function (res) {
          wx.hideLoading()
        }
      })
    },
    doProcessAction: function (event) {
      console.log(event)
      let that = this;
      let params = {};
      let customFormId = event.currentTarget.dataset.formid || 0;
      if (event) {
        params.processStageActionId = event.currentTarget.dataset.actionid;
        params.processInstanceId = event.currentTarget.dataset.processinstanceid;
      }
      if (customFormId && customFormId != 0) {
        app.globalData.preCallbackObj = { 'processInstanceItem':{callback:function(obj){
          params.formCommitId = obj;
          console.log("==========process intance item  hello===="+obj);
          that.doAction(params)
        }}
        };
        let linkUrl = "form_detail.html?customFormId=" + customFormId + "&actionEvent=" + JSON.stringify(params);
        app.globalData.linkEvent(linkUrl);
      } else {
        params.formCommitId = 0;
        wx.showModal({
          title: '提示',
          content: '主人~您是否确认执行!',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定')
              that.doAction(params)
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      }
    },
    doAction: function (params) {
      let that=this;
      let getParams = params;
      let customIndex = app.globalData.AddClientUrl("/wx_doProcess_instance_action.html", getParams)
      wx.request({
        url: customIndex.url,
        header: app.globalData.header,
        success: function (res) {
          console.log('====doAction-res===', res)
          if (res.data.errcode == 0) {
            that.setData({ processItem: res.data.relateObj})
            wx.showToast({
              title: res.data.errMsg,
              icon: 'success',
              duration: 2000
            })
          } else {
            wx.showToast({
              title: res.data.errMsg,
              icon: 'success',
              duration: 2000
            })
          }
        },
        complete: function (res) {

        }
      })
    },
    confirmProcessOrder: function (event) {
      console.log(event)
      let that = this;
      let params = {};
      let processInstanceId;
      if (event && event.currentTarget.dataset.id) {
        processInstanceId = event.currentTarget.dataset.id
      }
      params.processInstanceId = processInstanceId || 0;
      let customIndex = app.globalData.AddClientUrl("/wx_confirm_process_instance_servant.html", params)
      wx.showModal({
        title: '提示',
        content: '主人~您是否确认执行!',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
            wx.request({
              url: customIndex.url,
              header: app.globalData.header,
              success: function (res) {
                console.log('====confirmProcessOrder-res===', res)
                if (res.data.errcode == 0) {
                  wx.showToast({
                    title: "接单成功",
                    icon: 'success',
                    duration: 2000
                  })
                  that.setData({ processItem: res.data.relateObj })
                }
              },
              complete: function (res) {

              }
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
  },
})
export default global['__wxComponents']['partials/processInstanceItem/index']
</script>
<style platform="mp-weixin">
.container{
  background: #eee;
}
.process_list{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.process_item{
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
  width: 100%;
  background: #fff;
  padding: 20rpx 20rpx 0 20rpx;
  box-sizing: border-box;
}
.process_title{
  display: flex;
  flex-direction: row;
  font-size: 32rpx;
  margin-bottom: 30rpx;
  justify-content: space-between;
}
.process_title_left{
  display: flex;
  flex-direction: row;
  align-items: center
}
.process_title_right{
  display: flex;
  flex-direction: row;
  align-items: center
}
.order_icon{
  width:34rpx;
  height:40rpx;
  margin-right: 10rpx;
}
.order_no{
  font-size: 30rpx;
  color: #888
}
.process_type{
  color: #4bb3ff;
  margin-right: 10rpx;
}
.process_name{
  font-weight: bold;
  color: #888
}
.process_description{
  font-size: 32rpx;
  margin-bottom: 30rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
.process_state_icon{
  width: 60rpx;
  height: 60rpx;
  margin-right: 10rpx;
}
.process_bottom{
  border-top: 2rpx solid #eee;
  padding: 20rpx 0;
  display: flex;
  align-items: center;
  justify-content: space-between
}
.process_bottom_right{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.process_bottom_left{
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width:40%;
}
.check_record{
  height:50rpx;
  border:2rpx solid #4bb3ff;
  border-radius:10rpx;
  margin:4rpx 10rpx;
  display:flex;
  flex-direction:row;
  align-items:center;
  font-size:24rpx;
  background:#fff;
  justify-content:center;
  color:#4bb3ff;
  padding:0 10rpx;
}
.process_stage_list{
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 100%
}
.process_icon{
  width: 32rpx;
  height: 32rpx;
  margin-right: 6rpx;
}
.process_time{
  font-size: 30rpx;
  color: #888
}
.process_dot{
  width: 40rpx;
  height: 40rpx;
  margin-left: 20rpx;
}
.process_stage{
   display: flex;
   align-items: center;
   font-size: 22rpx;
   color: #888;
   margin: 6rpx 0
}
.process_line{
   height: 2rpx;
   background: #888;
   width: 40rpx;
}
.process_stage_dot{
  width: 4rpx;
  height: 4rpx;
  border-radius: 4rpx;
  border: 2rpx solid #888;
}
.process_stage_name{
   border: 2rpx solid #888;
   border-radius: 30rpx;
   padding: 10rpx 20rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight:bold;
   width:166rpx;
}
.process_stage_name .active{
   border: 2rpx solid #888;
   border-radius: 20rpx;
   padding: 4rpx 20rpx;
   display: flex;
   align-items: center;
   justify-content: center;
}
.user_group{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 24rpx;
  color: #888;
  width:100%;
  padding:0px 5px 15px 5px;
  box-sizing:border-box;
}
.service{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rpx;
  border-radius:10rpx;
  width:180rpx;
}
.service_type_title{
  border-bottom:2rpx solid #888;
  line-height:40rpx;
  height:40rpx;
  width:100%;
  text-align:center;
}
.service_name{
  height:40rpx;
  line-height:40rpx;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align:center;
}
.concat_line{
  width: 76rpx;
  height: 2rpx;
  background: #888
}
.concat_dot{
  width: 10rpx;
  height: 10rpx;
  border: 1rpx solid #888;
  border-radius: 10rpx;
}
.service_point{
  border-radius: 150rpx;
  width: 150rpx;
  height: 150rpx;
  line-height: 150rpx;
  text-align: center;
  border: 2rpx solid #4bb3ff;
  color: #888;
  margin:0 10rpx;
}
</style>